<template>
	<view class="left clearfix detail-box">
		<view style="font-size:16px;padding:15px;background: #fff;">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>

		<loading v-if="loading" ></loading>
		
		<view v-else class="detail-content left clearfix">
			<uni-table border stripe :emptyText="data || '暂无更多数据'"  style="border:1px solid #ccc;min-height:200px;margin:10rpx 0" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">选项</uni-th>
					<uni-th>值</uni-th>
				</uni-tr>
				
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						问题类型
					</uni-td>
					<uni-td>
						{{
							data.type == 1 ?'店铺问题': data.type== 2 ? '账户问题' : data.type == 3 ? '用户问题' : data.type == 4 ? '技术问题' : '其他问题'
						}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						用户名
					</uni-td>
					<uni-td>
						{{data.user_id[0].nickname}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						用户ID
					</uni-td>
					<uni-td>
						<view class="pagetitle" >
							<view>
								{{data.user_id[0]._id}}
							</view>
							<view>
								<button v-if="data.user_id[0].register_env.app_name=='易派商家'"  size="mini" @click="goUrl('/pages/shop/shop/shop-info?_uid='+data.user_id[0]._id)" >
									查看商家信息
								</button>
								
								<button v-if="data.user_id[0].register_env.app_name=='易派到家'" size="mini" @click="goUrl('/pages/system/user/detail?id='+data.user_id[0]._id)" >
									查看用户信息
								</button>
							</view>
						</view>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						登记平台
					</uni-td>
					<uni-td>
							<view>
								{{data.user_id[0].register_env.app_name}}
							</view>
					</uni-td>
				</uni-tr>
				
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						联系方式
					</uni-td>
					<uni-td>
						<text class="fontColorApp" >
							{{initMobile(data.mobile)}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						反馈内容
					</uni-td>
					<uni-td>
						{{data.content}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						反馈图片
					</uni-td>
					<uni-td>
						<image v-for="img in data.images" @click="eventImage(img)" :src="img+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix"
							style="width:50px;border:1px solid #ccc"></image>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						处理状态
					</uni-td>
					<uni-td>
						<view :style="`color:${ data.is_solve?'#0add69':'#f13'}`">
							{{data.is_solve? data.is_solve ? '已处理':'未处理':'未处理'}}
						</view>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight" colspan="2" >
						<view    >
							<button :disabled="data.is_solve" size="mini" @click="this.$refs.showStatus.open()" style="margin:0px 30px" type="primary" >
								{{data.is_solve? data.is_solve ? '已妥善处理':'处理':'处理'}}
							</button>
							<button  size="mini" @click="goback" >
								返回
							</button>
						</view>
					</uni-td>
				</uni-tr>
				
			</uni-table>
			
		</view>
	</view>
	
	
	
	
	
</template>
<script>
	import Util from "@/js_sdk/validator/util.js"
	const db  = uniCloud.database()
	const global = uniCloud.importObject("global",{customUI:true})
	const collection = "users_opinion"
	export default {
		data() {
			return {
				ID:'',
				// 面包屑
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "日志管理",},
					{to: "/pages/log/feedback/feedback",name: "意见反馈",},
					{to: "",name: "反馈详情"}
				],
				loading:true,
				data:{
					
				}
			}
		},
		onLoad(e) {
			this.ID = e.id
			this.getData(this.ID)
		},
		methods: {
			getData(ID){
				
				const feedback = db.collection(collection).orderBy("create_date desc").getTemp({
					getOne: true
				})
				const users = db.collection("uni-id-users").field("nickname,mobile,register_env,_id").getTemp({
					getOne: true
				})
				db.collection(feedback, users).where({_id:ID}).get({getOne:true,getCount:true,customUI:true}).then(res => {
					this.data = res.result.data
					console.log(	this.data );
					this.loading = false
				})
			},
			// 修改数据
			eventExamine(){
				db.collection(collection).doc(this.ID).update({
					is_solve:true
				}).then(res=>{
					this.$refs.showStatus.close()
					uni.showModal({
						title:"状态更改成功",
						content:"当前反馈已经成功解决，点击确认返回列表处",
						showcancel:false
					}).then(res=>{
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/log/feedback/feedback'
							})
						}
					})
				});
			},
			// 放大图片
			eventImage(image){
				uni.previewImage({
					urls:[image]
				})
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			initMobile(mobile){
				return Util.formatPhoneNumber(mobile)
			},
			goback(){
				uni.navigateBack(1)
			}
		}
	}
</script>


<style scoped>
	.popup {
		width: 500px;
		border-radius: 20rpx;
		padding: 30rpx;
	
		button {
			margin: 20px 50rpx;
		}
	}
	.uni-button{
		margin:0 10rpx
	}
	.detail-box {
		width: 100%;
		min-height:400px;
		background: #fff;
	}

	.detail-content {
		width: 90%;
		min-height:300px;
		margin-left: 5%;
		margin-top: 20px;
	}
</style>